<template>
  <div class="not-found-container">
    <div class="content">
      <div class="error-code">
        <span class="four">4</span>
        <span class="zero">
          <el-icon class="rotating-icon"><WarnTriangleFilled /></el-icon>
        </span>
        <span class="four">4</span>
      </div>
      <h1 class="title">页面不存在</h1>
      <p class="description">抱歉，您访问的页面不存在或已被删除</p>
      <div class="actions">
        <el-button type="primary" size="large" @click="goHome">
          <el-icon><HomeFilled /></el-icon>
          返回首页
        </el-button>
        <el-button size="large" @click="goBack">
          <el-icon><Back /></el-icon>
          返回上一页
        </el-button>
      </div>
    </div>
    
    <!-- 装饰性背景元素 -->
    <div class="bg-circles">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { HomeFilled, Back, WarnTriangleFilled } from '@element-plus/icons-vue'

const router = useRouter()

const goHome = () => {
  router.push('/home')
}

const goBack = () => {
  router.back()
}
</script>

<style scoped lang="less">
.not-found-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;

  .content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    animation: fadeInUp 0.8s ease-out;

    .error-code {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 150px;
      font-weight: bold;
      margin-bottom: 30px;
      
      .four {
        color: #fff;
        text-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
      }
      
      .zero {
        margin: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .rotating-icon {
          font-size: 120px;
          color: #ffd700;
          animation: rotate 3s linear infinite;
        }
      }
    }

    .title {
      font-size: 36px;
      font-weight: 600;
      margin-bottom: 15px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .description {
      font-size: 18px;
      margin-bottom: 40px;
      opacity: 0.9;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    }

    .actions {
      display: flex;
      gap: 20px;
      justify-content: center;
      
      :deep(.el-button) {
        padding: 12px 30px;
        font-size: 16px;
        border-radius: 25px;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }
      }
      
      :deep(.el-button--primary) {
        background: #fff;
        color: #667eea;
        border: none;
        
        &:hover {
          background: #f0f0f0;
        }
      }
      
      :deep(.el-button:not(.el-button--primary)) {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        border: 2px solid #fff;
        
        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }

  // 背景装饰圆圈
  .bg-circles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: float 20s infinite ease-in-out;
    }

    .circle-1 {
      width: 300px;
      height: 300px;
      top: 10%;
      left: 10%;
      animation-delay: 0s;
    }

    .circle-2 {
      width: 200px;
      height: 200px;
      top: 60%;
      right: 15%;
      animation-delay: 3s;
    }

    .circle-3 {
      width: 150px;
      height: 150px;
      bottom: 20%;
      left: 20%;
      animation-delay: 6s;
    }
  }
}

// 动画定义
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.1;
  }
  50% {
    transform: translateY(-50px) scale(1.1);
    opacity: 0.2;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .not-found-container {
    .content {
      .error-code {
        font-size: 100px;
        
        .zero .rotating-icon {
          font-size: 80px;
        }
      }

      .title {
        font-size: 28px;
      }

      .description {
        font-size: 16px;
        padding: 0 20px;
      }

      .actions {
        flex-direction: column;
        padding: 0 20px;
        
        :deep(.el-button) {
          width: 100%;
        }
      }
    }
  }
}
</style>

